<template>
	<el-drawer v-model="drawer" :with-header="false" @close="close" :append-to-body="true" :size="size" ref="drawerRef"
		class="customer-detail-drawer" :modal="true" modal-class="customer-modal">

		<h3 class="company-title">{{defaultForm.couponName}}</h3>
		<el-form :inline="true" :model="searchHistory" size="small" ref="searchHistoryForm">
			<el-form-item label="客户名称:">
				<el-input placeholder="请输入客户名称" v-model="searchHistory.memberNickName" @change="searchHistorySubmit">
				</el-input>
			</el-form-item>
			<el-form-item label="获取方式:">
				<el-select v-model="searchHistory.getType" placeholder="请选择获取方式" @change="searchHistorySubmit"
					clearable>
					<el-option v-for="item in getTypeOptions" :key="item.value" :label="item.label"
						:value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="使用状态:">
				<el-select v-model="searchHistory.useType" placeholder="请选择使用状态" @change="searchHistorySubmit"
					clearable>
					<el-option v-for="item in useTypeOptions" :key="item.value" :label="item.label"
						:value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="订单号:">
				<el-input placeholder="请输入订单号" v-model="searchHistory.orderSn" @change="searchHistorySubmit">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="searchHistorySubmit">查询</el-button>
				<el-button @click="reset(searchHistoryForm)">重置</el-button>
			</el-form-item>
		</el-form>

		<div class="table-list">
			<el-table :data="historylist" size="small" style="margin-top:10px;">

				<el-table-column prop="memberNickName" label="客户名称" width="150">
				</el-table-column>
				<el-table-column prop="getType" label="获取方式" width="150">
					<template #default="scope">
						<template v-for="item in getTypeOptions" :key="item.id">
							<span v-if="item.value == scope.row.getType ">{{item.label}}</span>
						</template>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="获取时间" width="150">
				</el-table-column>
				<el-table-column prop="useType" label="使用状态" width="150">
					<template #default="scope">
						<template v-for="item in useTypeOptions" :key="item.id">
							<span v-if="item.value == scope.row.useType ">{{item.label}}</span>
						</template>
					</template>
				</el-table-column>
				<el-table-column prop="useTime" label="使用时间" width="150">
				</el-table-column>
				<el-table-column prop="orderSn" label="订单号" width="150">
				</el-table-column>
				<!-- <el-table-column label="操作" fixed="right" width="180px">
				      <template #default="scope">
				        <el-button type="primary" link @click="editRow(scope.row)" size="small">编辑</el-button>
				        <el-button type="primary" link @click="delRow(scope.row)" size="small">删除</el-button>
						<el-button type="primary" link @click="receiveCouponHistory(scope.row)" size="small">领取历史记录</el-button>
				      </template>
				    </el-table-column> -->
			</el-table>
			<div class="page-block">
				<el-pagination v-model:currentPage="current" v-model:page-size="page" :page-sizes="[10, 20, 30, 40]"
					:small="true" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
					:total="total" :hide-on-single-page="true" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</div>
		</div>

		<div class="tabs-list">
			<!-- <div :class="['tabs-cell', item.id == customerId ? 'active' : '']" v-for="(item, index) in customerList" :key="item" @click="getCustomer(item.id)">客户{{index + 1}}</div> -->
			<div class="close-btn" @click="close">
				<el-icon color="var(--next-color-white)" size="28px">
					<ele-CircleClose />
				</el-icon>
			</div>
		</div>
	</el-drawer>
</template>

<script>
	import {
		toRefs,
		computed,
		reactive,
		watch,
		onMounted,
		ref,
		nextTick
	} from 'vue'
	import {
		pageList,
		remove,
		get
	} from '/@/api/sms/couponHistory'
	import api from '/@/api/commonApi'
	export default {
		name: 'CouponHistoryDetail',
		props: {
			dialogDrawer: {
				type: Boolean,
				default: false
			},
			defaultForm: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		setup(props, context) {
			const searchHistoryForm = ref()
			const state = reactive({
				size: '',
				searchHistory: {
					current: 1,
					size: 10,
					memberNickName: '',
					getType: null,
					useType: null,
					orderSn: ''
				},
				historylist: [],
				current: 1,
				page: 10,
				total: 0,
				getTypeOptions: [{
						value: 0,
						label: '后台赠送',
					},
					{
						value: 1,
						label: '主动领取',
					}
				],
				useTypeOptions: [{
						value: 0,
						label: '未使用',
					},
					{
						value: 1,
						label: '已使用',
					},
					{
						value: 2,
						label: '已过期',
					}
				],
			})

			const {
				dialogDrawer, defaultForm
			} = toRefs(props)
			let drawer = computed({
				get: () => dialogDrawer.value,
				set: (val) => {
					context.emit('update:dialogDrawer', val)
				}
			})
			let form = computed({
				get: () => defaultForm.value,
				set: (val) => {
					context.emit('update:defaultForm', val)
				}
			})
			watch(() => dialogDrawer.value, val => {
				context.emit("update:dialogDrawer", val)
				getList()
				if (val) {
					nextTick(() => {
						if (document.querySelector('.el-drawer__body')) {
							document.querySelector('.el-drawer__body').onscroll = e => {
								state.scrollTop = e.target.scrollTop
							}
						}
						if (document.querySelector('.refLine')) {
							state.refLineTop = document.querySelector('.refLine').offsetTop
						}
					})
				}
			})
			const getSize = () => {
				if (document.body.clientWidth <= 1400) {
					return '1220px'
				} else {
					return '85%'
				}
			}

			state.size = getSize()
			const close = () => {
				reset()
				context.emit("update:dialogDrawer", false)
			}
			const searchHistorySubmit = () => {
				state.searchHistory.current = 1
				getList()
			}
			const getList = () => {
				state.searchHistory.couponId = form.value.id
				api.couponLog(state.searchHistory).then(res => {
					state.historylist = res.data.records
					state.total = res.data.total
				})
			}
			const handleSizeChange = () => {
				getList()
			}
			const handleCurrentChange = e => {
				state.current = e
				getList()
			}
			const reset = (formEl) => {
				state.searchHistory = {
					current: 1,
					size: 10,
					memberNickName: '',
					getType: null,
					useType: null,
					orderSn: ''
				}
				getList()
			}

			onMounted(() => {
				window.onresize = () => {
					state.size = getSize()
				}
				getList()
			})
			return {
				drawer,
				form,
				...toRefs(state),
				close,
				searchHistoryForm,
				searchHistorySubmit,
				getList,
				handleSizeChange,
				handleCurrentChange,
				reset
			}
		}
	}
</script>

<style lang="scss">
	.customer-detail-drawer {
		overflow: unset;
		position: fixed;
	}

	.customer-modal {
		//left: unset;
	}

	.action-popper {
		background: transparent !important;
		position: relative;

		&:after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: var(--el-color-primary-light-9);
			opacity: .8;
			filter: grayscale(100%);
		}

		.el-popper__arrow::before {
			background: var(--el-color-primary-light-9) !important;
			opacity: .8;
			filter: grayscale(100%);
		}

		.sale-title {
			color: var(--el-text-color-primary);
		}
	}

	.tabs-list {
		position: absolute;
		top: 90px;
		left: -50px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		overflow: auto;
		max-height: 100%;

		// .tabs-cell{
		//     background: var(--next-color-white);
		//     margin-bottom: 3px;
		//     min-width: 60px;
		//     text-align: right;
		//     padding: 0 5px;
		//     cursor: pointer;
		//     font-size: 12px;
		//     border-radius: 5px 0 0 5px;
		//     box-shadow: rgba(0, 0, 0, 0.15) -1.95px -1.95px 2.6px;
		//     color: var(--el-text-color-secondary);
		//     transition: .1s;
		//     min-height: 35px;
		//     display: flex;
		//     flex-direction: column;
		//     align-items: center;
		//     justify-content: center;
		//     filter: brightness(.85);
		// }
		// .tabs-cell:hover,
		// .active{
		//     background: var(--el-color-primary-dark-2);
		//     color: var(--el-color-primary-light-9);
		//     padding: 5px 8px;
		//     min-width: 70px;
		//     font-size: 14px;
		//     font-weight: bold;
		//     filter: brightness(1)
		// }
		.close-btn {
			width: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			background: var(--el-color-primary);
			padding: 5px 0;
			border-radius: 5px 0 0 5px;
		}
	}

	.company-title {
		text-align: center;
		font-size: 18px;
		color: var(--next-bg-menuBar-light-1);
		margin-bottom: 50px;
	}
</style>
